<template>
  <!-- 全部房源 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="14"></ceList>
      <div class="houselist" v-if="xuan == 3">
        <div class="h1">
          <div class="one-tab no-padding">
            <div class="one-tab-left">
              <div class="one-tab-item " :class="houseindex == 1 ? 'active' : ''" @click="houseClick(1)">
                全部
              </div>
              <div class="one-tab-item " :class="houseindex == 2 ? 'active' : ''" @click="houseClick(2)">
                新房
              </div>
              <div class="one-tab-item " :class="houseindex == 3 ? 'active' : ''" @click="houseClick(3)">
                二手房
              </div>
              <div class="one-tab-item " :class="houseindex == 4 ? 'active' : ''" @click="houseClick(4)">
                出租房
              </div>
            </div>
            <div class="one-tab-right">
              <template v-if="!compilestate">
                <div class="one-tab-right-btn" @click="housecompile(true)">
                  编辑
                </div>
              </template>
              <template v-else>
                <div class="one-tab-right-btn" @click="housecompile(false)">
                  完成
                </div>
              </template>
            </div>
          </div>
          <!-- <div class="title">
            <div
              :class="houseindex == 1 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(1)"
            >
              全部
            </div>
            <div
              :class="houseindex == 3 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(3)"
            >
              新房
            </div>
            <div
              :class="houseindex == 2 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(2)"
            >
              二手房
            </div>
            <div
              :class="houseindex == 4 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(4)"
            >
              出租房
            </div>
            <div style="flex-grow: 1; display: flex; justify-content: flex-end">
              <div
                v-if="!compilestate"
                style="
                    font-size: 18px;
                    color: #333333;
                    padding: 5px 14px;
                    width: 40px;
                    font-weight: 400;
                    background-color: #e0e0e0;
                    border-radius: 22px;
                    cursor: pointer;
                  "
                @click="housecompile(true)"
              >
                编辑
              </div>
              <div
                v-else
                style="
                    font-size: 18px;
                    color: #333333;
                    padding: 5px 14px;
                    width: 40px;
                    font-weight: 400;
                    background-color: #e0e0e0;
                    border-radius: 22px;
                    cursor: pointer;
                  "
                @click="housecompile(false)"
              >
                完成
              </div>
            </div>
          </div> -->
          <div class="saixuan" v-if="houseindex != 1">
            <div class="li">
              <p class="p1">类别</p>
              <p class="p2" @click="leibieClick(-1)" :class="leibieIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <div v-for="(item, index) in type1" :key="index" @click="leibieClick(item)"
                  :class="leibieIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1">区域</p>
              <p class="p2" @click="areaClick(-1)" :class="areaIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <div v-for="(item, index) in type7" :key="index" @click="areaClick(item)"
                  :class="areaIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1" v-if="houseindex == 2 || houseindex == 3">
                售价
              </p>
              <p class="p1" v-else>租金</p>
              <p class="p2" @click="priceClick(-1)" :class="priceIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list" v-if="houseindex == 2 || houseindex == 3">
                <div v-for="(item, index) in type8" :key="index" @click="priceClick(item)"
                  :class="priceIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
              <div class="list" v-else>
                <div v-for="(item, index) in type12" :key="index" @click="priceClick(item)"
                  :class="priceIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1">面积</p>
              <p class="p2" @click="mianjiClick(-1)" :class="mianjiIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <div v-for="(item, index) in type9" :key="index" @click="mianjiClick(item)"
                  :class="mianjiIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1">楼层</p>
              <p class="p2" @click="loucClick(-1)" :class="loucIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <div v-for="(item, index) in type10" :key="index" @click="loucClick(item)"
                  :class="loucIndex == item.valueNum ? 'xuan' : ''">
                  {{ item.valueName }}
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1">佣金</p>
              <p class="p2" @click="yongjClick(-1)" :class="yongjIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <div style="
                        display: flex;
                        color: #333333;
                        align-items: center;
                      
                      ">
                  <input @input="yongjChange1" type="number" placeholder="最低价" style="
                          background: #ffffff;
                          border-radius: 4px;
                          border: 1px solid #d0d0d0;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          padding-left: 10px;
                          color: #333;
                          font-size: 16px;
                        " v-model="housepage.startYongjin" />
                  <span style="margin-right: 3px; margin-left: 3px">-</span>
                  <input @input="yongjChange2" type="number" placeholder="最高价" v-model="housepage.overYongjin" style="
                          background: #ffffff;
                          border-radius: 4px;
                          border: 1px solid #d0d0d0;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          padding-left: 10px;
                          color: #333;
                          font-size: 16px;
                        " />
                  <span style="margin-right: 6px; margin-left: 6px">元</span>
                  <!-- <div
                        @click.stop="comfirmPrice"
                        style="
                          text-align: center;
                          display: inline-block;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          background: #64b6a8;
                          border-radius: 4px;
                          color: #ffffff;
                          font-weight: 600;
                        "
                      >
                        确定
                      </div> -->
                </div>
              </div>
            </div>
            <div class="li">
              <p class="p1">时间</p>
              <p class="p2" @click="shijClick(-1)" :class="shijIndex == -1 ? 'xuan' : ''">
                不限
              </p>
              <div class="list">
                <el-date-picker style="line-height:20px;" @change="shijClick" value-format="yyyy-MM-dd" v-model="value2"
                  type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
            <div class="yixuan" style="width:806px" v-if="screenList.length > 0">
              <div class="na">已选条件：</div>
              <div class="li" v-for="(item, index) in screenList" :key="item.ftype + item.id">
                {{ item.value }}
                <img src="../../assets/cha.png" @click="clear(item)" />
              </div>
              <div class="qinchu" @click="clear(-1)">
                清除全部
              </div>
            </div>
          </div>
          <div class="house">
            <div class="houseview" v-for="(item, index) in houseList" :key="index" v-if="houseList.length > 0">
              <template v-if="compilestate">
                <div v-if="!item.choose" style="
                      font-size: 50px;
                      line-height: 154px;
                      color: #d1d1d1;
                      margin-right: 10px;
                      cursor: pointer;
                    " @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                      font-size: 30px;
                      line-height: 154px;
                      color: #64b6a8;
                      margin-right: 10px;
                      cursor: pointer;
                    " @click="choosehouse(item.id)"></p>
              </template>
              <div>
                <img class="pointer" @click="details(item)" style="object-fit: contain" :src="item.display_diagram
                  ? item.display_diagram
                  : $img + item.houseImageDiv
                  " />
                <div
                  style="width:264px;padding: 4px; border-radius: 4px;border: 1px solid #a2a2a2; display: flex;margin-top: 10px; justify-content:space-between; align-items: center;">
                  <span style="color:#999;display: flex; align-items: center;">
                    共享者说:
                    <span style="color: #999;display:inline-block;">佣金{{ item.commission }}元</span>
                  </span>
                  <div class="pointer" style="color:#64B6A8" @click.stop="openShareTips(item)">
                    展开
                    <i class="el-icon-arrow-down"></i>
                  </div>
                </div>
              </div>

              <div class="pointer" style="
                    width: 460px;
                    display: flex;
                    flex-direction: column;
                    padding-left: 14px;
                    justify-content: space-between;
                  " @click="details(item)">
                <div style="
                      color: #333333;
                      font-size: 20px;
                      font-weight: 600;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    ">
                  {{ item.title }}
                </div>
                <div style="
                      font-size: 14px;
                      color: #666666;
                      font-weight: 400;
                      margin-top: 8px;
                    ">
                  {{ item.region }} {{ item.address }}
                </div>
                <div style="
                      display: flex;
                      color: #666666;
                      font-size: 14px;
                      font-weight: 400;
                      margin-top: 8px;
                    ">
                  <div>{{ item.house_type }}</div>
                  <div style="margin-left: 15px">{{ item.AREA }}m²</div>
                  <div style="margin-left: 18px">{{ item.foors }}</div>
                </div>
                <div style="flex-grow: 1" @click.stop></div>
                <div style="display: flex; align-items: center;justify-content: space-between;">
                  <div style="display: flex; align-items: center;">
                    <img style="width: 30px; height: 30px; border-radius: 30px" :src="item.image || defaultAvatar" />
                    <div style="color: #333333; font-size: 14px; margin-left: 7px">
                      {{ item.nikeName || "未命名用户" }}
                    </div>
                    <div style="
                                            color: #64b6a8;
                                            font-size: 14px;
                                            padding: 1px 3px;
                                            border: #64b6a8 1px solid;
                                            border-radius: 5px;
                                            margin-left: 7px;
                                          ">
                      {{ item.shop_name }}
                    </div>
                  </div>
                </div>
              </div>
              <div style="
                    width: 200px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                  ">
                <div style="color: #e00000; font-size: 26px" v-if="item.transaction_type == 1">
                  {{ item.price }}元
                </div>
                <div style="color: #e00000; font-size: 26px" v-if="item.transaction_type == 2">
                  {{ item.price }}万
                </div>
                <!-- <div style="color: #E00000;font-size: 26px;">{{ (item.price / 10000).toFixed(2) }}万</div> -->
                <div style="color: #333333; font-size: 12px; font-weight: 400" v-if="item.transaction_type == 2">
                  {{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/m²
                </div>
              </div>
            </div>
            <div class="li" v-if="houseList.length == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有在售房源" v-if="houseindex == 1"></el-empty>
              <el-empty description="还没有在售二手房" v-if="houseindex == 2"></el-empty>
              <el-empty description="还没有在售新房" v-if="houseindex == 3"></el-empty>
              <el-empty description="还没有在售出租房" v-if="houseindex == 4"></el-empty>
            </div>
            <el-pagination @current-change="houseCurrentChange" background layout="prev, pager, next" :total="housetotal"
              :page-size="housepage.pageSize" :current-page="housepage.PageNo"
              style="text-align: center;margin-top:20px;"></el-pagination>
          </div>
          <div v-if="compilestate" style="
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: space-between;
                padding: 0 39px;
                box-sizing: border-box;
                align-items: center;
                font-size: 20px;
                color: #333333;
              ">
            <div></div>
            <el-button type="primary" @click="shangjiaC">申领房源</el-button>
            <!-- <el-select style="width: 80px;" size="mini" v-model="housevalue2" placeholder="请选择" @change="operation">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
            </el-select>-->
          </div>
        </div>
      </div>
    </div>

    <div class="popupBox" v-if="sharePop" @click="sharePop = false">
      <div class="popupit" @click.stop>
        <div class="title just-content flex">
          <span>共享者说:</span>
          <img @click="goJuBao" class="pointer" src="https://pic.bangbangtongcheng.com/static/jubao.png"
            style="width: 40px; height: 40px;" />
        </div>
        <div class="title">
          <div class="yong-jin flex">
            佣金:
            <div class>{{ houseDetails.commission }}元</div>
          </div>
          <div class="yong-jin flex">
            <span>备注:</span>
            <div>{{ houseDetails.share_remark }}</div>
          </div>
        </div>
        <div class="btn" @click="sharePop = false">确认</div>
      </div>
    </div>

    <el-dialog :visible.sync="topVisible" width="26%" center :show-close="false" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div style="width: 100%; display: flex; flex-direction: column">
        <div style="
              display: flex;
              color: #000000;
              font-size: 20px;
              font-weight: 400;
              padding: 10px 20px;
            ">
          <div>置顶信息：</div>
          <div>
            <div style="
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 240px;
                " v-for="(item, index) in houseList" v-if="item.choose" :key="index">
              {{ item.title }}
            </div>
          </div>
        </div>
        <div style="
              display: flex;
              margin-top: 26px;
              align-items: center;
              padding: 0px 20px;
            ">
          <div style="color: #000000; font-size: 20px">置顶天数：</div>
          <input v-model="day" placeholder="请输入置顶天数" style="border: #e0e0e0 1px solid; width: 240px" />
        </div>
        <div style="
              color: #ea4b4b;
              font-size: 18px;
              margin-top: 31px;
              padding: 0px 20px;
            ">
          平台规则：每天限定置顶20条次，置顶信息按时间排序
        </div>
        <div style="
              width: 100%;
              height: 65px;
              margin-top: 32px;
              font-size: 21px;
              font-weight: 400;
              display: flex;
            ">
          <div style="
                width: 50%;
                background-color: #f2f2f2;
                color: #333333;
                text-align: center;
                line-height: 65px;
                border-bottom-left-radius: 10px;
                cursor: pointer;
              " @click="topVisible = false">
            取消
          </div>
          <div style="
                width: 50%;
                background-color: #64b6a8;
                color: #ffffff;
                text-align: center;
                line-height: 65px;
                border-bottom-right-radius: 10px;
                cursor: pointer;
              " @click="topSub">
            确认
          </div>
        </div>
      </div>
    </el-dialog>
    <floor></floor>
    <report ref="report" :bUserId="houseDetails.user_id"></report>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import report from "../../components/report.vue";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    report,
    ceList,
    titlesearch
  },
  data() {
    return {
      options: [
        { value: 0, label: "首页" },
        { value: 1, label: "房源信息" }
      ],
      options2: [
        { value: 1, label: "上架" },
        { value: 2, label: "下架" },
        { value: 3, label: "已出租" },
        { value: 4, label: "已出售" }
      ],
      compilestate: false,
      housevalue: "",
      housevalue2: "",
      xuan: 3,
      imageUrl: "",
      input: "",
      user: {},
      loginstate: false,
      userdata: {},
      housepage: {
        pageSize: 5,
        pageNo: 1,
        examineStatus: "2",
        isCopy: 0,
        isShare: 1,
        newOld: "",
        type: "",
        region: "",
        price: "",
        area: "",
        floor: "",
        startTime: "",
        overTime: "",
        startYongjin: "",
        overYongjin: ""
      },
      houseList: [],
      housetotal: 0,
      houseindex: 1,
      topVisible: false,
      xzList: [],
      day: "",
      oldpwd: "",
      onepwd: "",
      twopwd: "",
      imgurl: this.$img,
      mainStore: "",
      houseDetails: {},
      sharePop: false,

      leibieIndex: -1,
      areaIndex: -1,
      priceIndex: -1,
      mianjiIndex: -1,
      loucIndex: -1,
      type8: [],
      type9: [],
      type10: [],
      type12: [],
      type1: [],
      type7: [],
      value2: "",
      shijIndex: -1,
      yongjIndex: -1,
      screenList: []
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    checkFilterData(arr = [], id, type) {
      return arr.filter(item => item.ftype == type && item.id == id).length > 0;
    },
    clear(item, flag) {
      if (item != -1) {
        var type = item.ftype;
        if (type == "type") {
          //类别
          this.leibieClick(-1);
        } else if (type == "region") {
          //区域
          this.areaClick(-1);
        } else if (type == "price") {
          // 价格
          this.priceClick(-1);
        } else if (type == "area") {
          // 面积
          this.mianjiClick(-1);
        } else if (type == "floor") {
          // 楼层
          this.loucClick(-1);
        } else if (type == "startTime") {
          // 时间
          this.shijClick(-1);
        } else if (type == "startYongjin") {
          // 佣金
          this.yongjClick(-1);
        }
      } else {
        this.leibieIndex = item;
        this.housepage.type = "";
        this.priceIndex = item;
        this.housepage.price = "";
        this.mianjiIndex = item;
        this.housepage.area = "";
        this.areaIndex = item;
        this.housepage.region = "";
        this.loucIndex = -1;
        this.housepage.floor = "";

        this.housepage.startYongjin = "";
        this.housepage.overYongjin = "";
        this.yongjIndex = -1;

        this.housepage.startTime = "";
        this.housepage.overTime = "";
        this.shijIndex = -1;
        this.value2 = [];
        if (!flag) {
          this.getHouseInfo();
        }
      }
    },
    dealOPe(newV) {
      var screenList = [];
      var checkArr = [];
      var labelKey = "";
      var obj = {};
      for (const key in newV) {
        if (Object.hasOwnProperty.call(newV, key)) {
          const element = newV[key];
          if (
            key == "type" ||
            key == "price" ||
            key == "region" ||
            key == "area" ||
            key == "floor" ||
            key == "startTime" ||
            key == "startYongjin"
          ) {
            labelKey = "";
            obj = "";
            if (key == "type") {
              //类别
              checkArr = this.type1;
              labelKey = "valueNum";
            } else if (key == "region") {
              //区域
              checkArr = this.type7;
            } else if (key == "price") {
              // 价格
              checkArr = this.type8;
            } else if (key == "area") {
              // 面积
              checkArr = this.type9;
            } else if (key == "floor") {
              // 楼层
              labelKey = "valueNum";
              checkArr = this.type10;
            } else if (key == "floor") {
              // 楼层
              labelKey = "valueNum";
              checkArr = this.type10;
            } else if (
              key == "startTime" &&
              element !== "" &&
              newV["overTime"] !== ""
            ) {
              // 时间
              obj = [
                {
                  id: 100898,
                  value: `${element || 0}~${newV["overTime"] || 0}`,
                  ftype: key
                }
              ];
            } else if (key == "startYongjin" && element != "") {
              // 佣金
              obj = [
                {
                  id: 100899,
                  value: `${element}-${newV["overYongjin"]}元`,
                  ftype: key
                }
              ];
            }
            labelKey = labelKey || "valueName";
            console.log(element, checkArr);
            obj =
              obj ||
              checkArr
                .filter(item => item[labelKey] == element)
                .map(item => {
                  return {
                    ...JSON.parse(JSON.stringify(item)),
                    value: item.valueName,
                    ftype: key
                  };
                });
            if (!this.checkFilterData(this.screenList, obj.id, key)) {
              console.log("进来了进来了");
              screenList.push(...obj);
              console.log(screenList);
            }
          }
        }
      }
      this.screenList = screenList;
    },
    // // 判断是否是连锁店
    // async getMultiple(){
    // 	await this.$getHttp("/mob/user/getShopInfoById", {
    // 		shopId: JSON.parse(localStorage.getItem("userInfo")).shopId,
    // 	}).then((data) => {
    // 		if (data.shopInfo.mainStore && data.shopInfo.mainStore!='') {
    // 			this.mainStore=data.shopInfo.mainStore
    // 		}
    // 	});
    // },
    openShareTips(val) {
      console.log(val);
      this.houseDetails = val;
      this.sharePop = true;
      console.log(21);
    },
    goJuBao() {
      this.$refs.report.jubaoGuan(this.houseDetails.id);
    },
    getDictionaries() {
      this.$getHttp("/mob/home/getDictionaries", {
        type: "8,9,10,12,1,7"
      }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            if (e.type == 8) this.type8.push(e);
            if (e.type == 9) this.type9.push(e);
            if (e.type == 10) this.type10.push(e);
            if (e.type == 12) this.type12.push(e);
            if (e.type == 1) this.type1.push(e);
            if (e.type == 7) this.type7.push(e);
          });
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      // await this.getMultiple()
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.imageUrl = user.image;
        // this.housepage.shopId = user.shopId;
        this.userdata = {
          nikeName: user.nikeName,
          phone: user.phone
        };

        this.getDictionaries();
        this.getHouseInfo();
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        this.$router.push("/");
      }
    },
    shangjiaC(id) {
      var ids = "";
      this.houseList.forEach(e => {
        if (e.choose) {
          ids += e.id + ",";
        }
      });
      console.log(ids);
      var reg = /,$/gi;
      ids = ids.replace(reg, "");

      this.$postHttp("/mob/user/copyHouseInfo", {
        userId: this.user.id,
        ids: ids,
        shopId: this.user.shopId || this.user.shop_id || ""
      }).then(res => {
        if (res.code == 200) {
          this.compilestate = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          setTimeout(() => {
            this.$router.push({
              path: "/my/bbcz/wdRelease"
            });

            // this.initgetHouseInfo()
          }, 500);
        }
      });
    },
    getHouseInfo() {
      if (this.housepage.startYongjin || this.housepage.overYongjin) {
        if (this.housepage.startYongjin && this.housepage.overYongjin) {
          if (+this.housepage.startYongjin > +this.housepage.overYongjin) {
            this.myErrorMessage("最低价不能超过最高价");
            return;
          } else {
            // 通过
          }
        } else {
          console.log(this.housepage.startYongjin, this.housepage.overYongjin);
          this.myErrorMessage("请填写最低价或者最高价");
          return;
        }
      }

      console.log("1111111111111111111");
      this.dealOPe(JSON.parse(JSON.stringify(this.housepage)));
      this.$getHttp("/mob/home/getHouseInfo", this.housepage).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            e.choose = false;
            if (e.house_image) {
              e.house_image = this.$img + e.house_image.split("|")[0];
            }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.houseList = data.list;
          this.housetotal = data.count;
          console.log(1, this.houseList);
        }
      });
    },
    details(item) {
      if (item.transaction_type == 1) {
        this.openUrl({
          path: "/index/shareHouseDetailsLease",
          query: {
            id: item.id
          }
        });
      } else {
        this.openUrl({
          path: "/index/shareHouseDetails",
          query: {
            id: item.id
          }
        });
      }
    },
    yongjClick(item) {
      this.housepage.startYongjin = "";
      this.housepage.overYongjin = "";
      this.yongjIndex = -1;
      this.getHouseInfo();
    },
    yongjChange1(e) {
      console.log(e);
      // this.housepage.startYongjin=''
      this.yongjIndex = 1;
    },
    yongjChange2(e) {
      // this.housepage.overYongjin=''
      this.yongjIndex = 1;
    },
    shijClick(item) {
      if (Array.isArray(item)) {
        this.housepage.startTime = item[0];
        this.housepage.overTime = item[1];
        this.shijIndex = 1;
      } else {
        this.housepage.startTime = "";
        this.housepage.overTime = "";
        this.shijIndex = -1;
        this.value2 = [];
      }
      this.getHouseInfo();
    },
    updata(type) {
      switch (type) {
        case 1:
          this.updateUser({
            id: this.user.id,
            nikeName: this.user.nikeName
          });
          break;
        case 2:
          // this.updateUser({
          // 	id:this.user.id,
          // 	phone:this.user.nikeName
          // })
          this.$message({
            message: "需开发组件！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          break;
        case 4:
          this.$confirm("此操作将永久注销该账号, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$postHttp("/mob/user/cancellation", {
                id: this.user.id
              }).then(data => {
                if (data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "注销成功!"
                  });
                  localStorage.removeItem("userInfo");
                  this.$router.push({
                    path: "/"
                  });
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
          break;
      }
    },
    updateUser(data) {
      this.$postHttp("/mob/user/updateUserInfo", data).then(data => {
        if (data.code == 200) {
          this.$message({
            message: "修改昵称成功！",
            type: "success",
            offset: 120,
            duration: 2000
          });
          this.getUserInfo();
        }
      });
    },
    getUserInfo() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.user.phone
      }).then(data => {
        if (data.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
        }
      });
    },
    xuanClick(num) {
      this.xuan = num;
      switch (num) {
        case 1:
          this.$router.push({
            path: "/my/index"
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect"
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing"
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform"
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument"
          });
          break;
      }
    },
    //删除房源
    delHouse() {
      let delList = [];
      this.houseList.forEach(e => {
        if (e.choose) {
          delList.push(e.id);
        }
      });
      if (delList.length > 0) {
        this.$confirm("此操作将删除选中的房源, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // delList.forEach((e) =>{
            this.$postHttp("/mob/user/delHouseInfo", {
              ids: delList.join(",")
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
            // })
            setTimeout(() => {
              this.initgetHouseInfo();
            }, 500);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    choosehouse(id) {
      this.houseList.forEach(e => {
        if (e.id == id) {
          e.choose = !e.choose;
        }
      });
    },
    updatPwd() {
      if (this.onepwd.trim() == this.twopwd.trim()) {
        this.$postHttp("/mob/login/updatePassByPass", {
          id: this.user.id,
          password: this.twopwd.trim(),
          oldPassword: this.oldpwd.trim()
        }).then(data => {
          if (data.code == 200 && data.success) {
            this.$message({
              message: "密码修改成功！",
              type: "success",
              offset: 120,
              duration: 2000
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "2次新密码不一致！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "共层" + fool[1] + "层";
    },
    houseClick(index) {
      this.houseindex = index;
      this.housepage.pageNo = 1;
      switch (index) {
        case 1:
          delete this.housepage.newOld;
          delete this.housepage.transactionType;
          break;
        case 2:
          this.housepage.newOld = 2;
          this.housepage.transactionType = 2;
          break;
        case 3:
          this.housepage.newOld = 1;
          this.housepage.transactionType = 2;
          break;
        case 4:
          delete this.housepage.newOld;
          this.housepage.transactionType = 1;
          break;
      }
      this.getHouseInfo();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$postHttp("/mob/user/updateUserInfo", {
        id: this.user.id,
        image: this.imgurl + res.attach.attachPath
      }).then(data => {
        if (data.code == 200) {
          this.user.image = this.imgurl + res.attach.attachPath;
          this.$message({
            message: "修改头像成功！",
            type: "success",
            offset: 120,
            duration: 2000
          });
          this.getUserInfo();
        }
      });
    },
    houseCurrentChange(e) {
      this.housepage.pageNo = e;
      this.getHouseInfo();
    },
    operation() {
      this.$confirm(
        "此操作将" +
        this.options2[this.housevalue2 - 1].label +
        "该房源, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.houseList.forEach(e => {
            if (e.choose) {
              this.$postHttp("/mob/home/updateUpStatus", {
                userId: this.user.id,
                id: e.id,
                upStatus: this.housevalue2
              }).then(data => {
                if (data.code == 200) {
                  this.$message({
                    message:
                      this.options2[this.housevalue2 - 1].label + "成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000
                  });
                  this.initgetHouseInfo();
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + this.options2[this.housevalue2 - 1].label
          });
        });
    },
    housecompile(type) {
      this.compilestate = type;
      // if(type){
      // 	this.compilestate = type
      // }else{
      // 	// let idList = []
      // 	// this.houseList.forEach((e) =>{
      // 	// 	if(e.choose){
      // 	// 		idList.push(e.id)
      // 	// 	}
      // 	// })
      // 	// if(idList.length == 0){
      // 	// 	this.compilestate = type
      // 	// 	return
      // 	// }
      // 	this.xzList = idList
      // }
    },
    openTop(index) {
      this.houseList.forEach(e => {
        if (e.choose) {
          this.topVisible = true;
        }
      });
    },
    initgetHouseInfo() {
      this.housepage.pageNo = 1;
      this.getHouseInfo();
    },
    //确认置顶
    topSub() {
      if (this.day == "") {
        this.$message({
          message: "请输入置顶天数！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      } else {
        this.houseList.forEach(e => {
          if (e.choose) {
            this.$postHttp("/mob/home/updateUpHomePage", {
              id: e.id,
              dayNum: this.day,
              isShow: this.housevalue
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  message: "置顶成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000
                });
                this.initgetHouseInfo();
              }
            });
          }
          e.choose = false;
        });
        this.topVisible = false;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M");
      }
      return isJPG && isLt2M;
    },
    leibieClick(item) {
      this.housepage.pageNo = 1;
      if (item != -1) {
        this.leibieIndex = item.valueNum;
        this.housepage.type = item.valueNum;
        this.getHouseInfo();
        return;
      }
      this.leibieIndex = item;
      delete this.housepage.type;
      this.getHouseInfo();
    },
    priceClick(item) {
      this.housepage.pageNo = 1;
      if (item != -1) {
        this.priceIndex = item.valueNum;
        this.housepage.price = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.priceIndex = item;
      delete this.housepage.price;
      this.getHouseInfo();
    },
    mianjiClick(item) {
      this.housepage.pageNo = 1;
      if (item != -1) {
        this.mianjiIndex = item.valueNum;
        this.housepage.area = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.housepage.area;
      this.getHouseInfo();
    },
    areaClick(item) {
      this.housepage.pageNo = 1;
      if (item != -1) {
        this.areaIndex = item.valueNum;
        this.housepage.region = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.areaIndex = item;
      delete this.housepage.region;
      this.getHouseInfo();
    },
    loucClick(item) {
      this.housepage.pageNo = 1;
      if (item != -1) {
        this.loucIndex = item.valueNum;
        this.housepage.floor = item.remarks;

        this.getHouseInfo();
        return;
      }
      this.loucIndex = item;
      delete this.housepage.floor;
      this.getHouseInfo();
    }
  }
};
</script>
<style lang="less" scoped>
.just-content {
  justify-content: space-between;
}

.popupBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  // z-index: 10000;
  .popupit {
    width: 434px;
    background-color: #ffffff;
    border-radius: 10px;

    .title {
      font-size: 26px;
      padding: 0 37px;
      margin-top: 14px;
      color: #000;
      font-weight: 500;

      .yong-jin {
        font-weight: 400;
        margin-bottom: 10px;
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: 21px;

        div {
          font-weight: 400;
          font-size: 21px;
          margin-left: 10px;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }

    .btn {
      width: 100%;
      height: 70px;
      color: #fff;
      background-color: #64b6a8;
      font-size: 23px;
      text-align: center;
      line-height: 70px;
      border-radius: 0 0 10px 10px;
      margin-top: 48px;
      cursor: pointer;
    }
  }

  // .btn {
  //     margin-top: 43px;
  //     display: flex;
  //     box-sizing: border-box;

  //     .cancel {
  //         width: 115px;
  //         height: 44px;
  //         border-radius: 37px;
  //         border: 1px solid #64B6A8;
  //         font-size: 21px;
  //         color: #64B6A8;
  //         text-align: center;
  //         line-height: 44px;
  //         margin-left: 87px;
  //         margin-right: 32px;
  //         cursor: pointer;
  //     }

  //     .affirm {
  //         width: 115px;
  //         height: 44px;
  //         background: #64B6A8;
  //         border-radius: 37px;
  //         text-align: center;
  //         line-height: 44px;
  //         cursor: pointer;
  //     }
  // }
}

.tips-top {
  padding: 45px 35px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tips-content {
  padding: 0 30px;
}

.houselist {
  width: 936px;
  // height: 820px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  vertical-align: top;
  display: inline-block;

  .h1 {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    color: #333333;
  }

  .title {
    display: flex;
    padding: 25px 34px;
    color: #333333;
    font-size: 20px;
    align-items: center;
    border-bottom: #e0e0e0 1px solid;
    justify-content: space-between;
  }

  .ttext {
    margin-right: 60px;
    cursor: pointer;
  }

  .xttext {
    color: #64b6a8;
    font-size: 26px;
    margin-right: 54px;
    cursor: pointer;
  }

  .house {
    width: 100%;
    // height: 630px;
    padding: 0 0 30px 0;

    .houseview {
      position: relative;
      width: 100%;
      height: 218px;
      padding: 32px;
      box-sizing: border-box;
      display: flex;

      img {
        width: 230px;
        height: 154px;
      }
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .bianji {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;

    .ming {
      width: 876px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      background: #f2f2f2;
      text-indent: 23px;
      margin-left: 32px;
      margin-top: 24px;
    }

    .lei {
      margin-top: 40px;

      .p {
        display: inline-block;
        vertical-align: unset;
        width: 100px;
        font-size: 20px;
        text-align: right;
        margin-left: 210px;
        margin-right: 70px;
        font-weight: 600;
      }

      .el-input {
        width: 220px;
        font-size: 18px;

        /deep/.el-input__inner {
          border: 0;
          color: #333;
          border-bottom: 1px solid #e0e0e0;
          box-sizing: content-box;
          padding-bottom: 15px;
        }
      }

      .div {
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
        color: #2264d2;
        cursor: pointer;
      }
    }

    .wenben {
      width: 835px;
      margin-left: 52px;
      margin-top: 40px;

      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20px;
      }

      p {
        font-size: 20px;
        line-height: 45px;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/deep/.el-input__inner {
  border-radius: 20px;
  border: #64b6a8 1px solid;
  color: #64b6a8;
}

/deep/.el-dialog__body {
  // padding: 0px;
}

/deep/.el-dialog {
  border-radius: 20px;
}

.pointer {
  cursor: pointer;
}

.saixuan {
  color: #333;
  width: 800px;
  // margin-left: 50%;
  // transform: translateX(-50%);
  font-size: 0;
  margin-left: 34px;
  margin-top: 20px;

  .li {
    .p1 {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 600px;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
